<template>
  <div
    class="page-codesetting"
    @click="openFileCode"
    v-if="code && (code.includes('.sh') || code.includes('.py'))"
  >
    <i class="iconfont icon-edit"/>
    编辑脚本
    <!-- 选择编辑器 -->
    <Modal footer-hide class="page-custom-model  page-vscode-model" v-model="editFileStatus" fullscreen title="编辑文件" @on-cancel="editFileCodeCancel">
      <VsCodeMenu v-show="editFileStatus" :defaultExpandFilePath="fullFileName" @setValue="setValue"/>
      <VsCodeEditor v-if="editFileStatus" :options="vscodeOption" :hasMenu="true" ref="vsCodeEditor"/>

      <div class="drawer-footer">
        <Button style="margin-right: 8px" @click="editFileCodeCancel">取消</Button>
        <Button type="primary"  style="margin-right: 8px" @click="editFileCode(false)">保存</Button>
        <Button type="primary" @click="editFileCode(true)">保存并关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { preview, edit } from 'http/api/file';
import VsCodeMenu from 'pages/Common/VsCodeMenu';

const VsCodeEditor = () => import('pages/Common/VsCodeEditor');

export default {
  props: ['code'],
  components: {
    VsCodeEditor,
    VsCodeMenu
  },
  data () {
    return {
      fullFileName: '/',
      editFileStatus: false,
      vscodeOption: {
        value: '',
        language: ''
      }
    };
  },
  methods: {
    // 打开编辑器
    openFileCode () {
      let fullFileName = this.code.replace(/\\/g, '/');
      if (fullFileName.includes('/datavolume')) {
        fullFileName = fullFileName.substr(11);
      }
      this.fullFileName = fullFileName;
      preview({
        fullFileName
      }).then(res => {
        if (res) {
          this.vscodeOption.value = res.data;
          this.vscodeOption.language = this.code.includes('.py')
            ? 'python'
            : 'shell';
          this.editFileStatus = true;
        }
      });
    },

    // 编辑器销毁
    editFileCodeCancel () {
      this.editFileStatus = false;
      this.$refs.vsCodeEditor.dispose();
    },

    // 确认修改
    editFileCode (boolean) {
      let code = this.$refs.vsCodeEditor.getValue();
      if (!this.fullFileName) {
        this.$Message.error('请选择可用的文件名');
        return;
      }
      edit({
        fullFileName: this.fullFileName,
        content: code
      }).then(res => {
        if (res) {
          this.$Message.success('修改成功');

          if (boolean) {
            this.editFileCodeCancel();
          }
        }
      });
    },

    // 切换编辑器的文件
    setValue (params) {
      let { fullFileName, data } = params;
      this.fullFileName = fullFileName;
      this.$refs.vsCodeEditor.setValue(data);
    }
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.page-codesetting {
  cursor: pointer;
  &:hover {
    color: #2d8cf0;
  }
}
</style>

<style lang="less">
.page-custom-model {
  .drawer-footer {
    z-index: 99;
    position: absolute;
    bottom: 15px;
    right: 50px;
  }
  .vue-codemirror {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 90%;
  }
  .CodeMirror {
    height: 100%;
  }
}
</style>
